<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        border: 0;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      :root {
        --hue: 223;
        --bg: hsl(var(--hue), 10%, 90%);
        --fg: hsl(var(--hue), 10%, 10%);
        --trans-dur: 0.5s;
        --trans-timing1: cubic-bezier(0.65, 0, 0.35, 1);
        --trans-timing2: cubic-bezier(0.65, 0, 0.35, 1.5);
        font-size: calc(56px + (120 - 56) * (100vw - 280px) / (3840 - 280));
      }

      body,
      input {
        color: var(--fg);
        font: 1em/1.5 sans-serif;
        transition: background-color var(--trans-dur) var(--trans-timing1), color var(--trans-dur) var(--trans-timing1);
      }

      body {
        background-color: var(--bg);
        display: flex;
        height: 100vh;
      }

      .switch {
        display: flex;
        margin: auto;
      }
      .switch__emoji {
        box-shadow: 0.25em 0.25em 0.125em rgba(0, 0, 0, 0.3);
        overflow: hidden;
        pointer-events: none;
        top: 0.25em;
        left: 0.25em;
        width: 1em;
        height: 1em;
      }
      [dir="rtl"] .switch__emoji {
        right: 0.25em;
        left: auto;
      }
      .switch__emoji,
      .switch__emoji:before,
      .switch__emoji:after,
      .switch__emoji-eye,
      .switch__emoji-mouth,
      .switch__emoji-face {
        display: block;
        position: absolute;
      }
      .switch__emoji,
      .switch__emoji:before,
      .switch__emoji:after,
      .switch__emoji-eye,
      .switch__emoji-mouth {
        border-radius: 50%;
      }
      .switch__emoji:before,
      .switch__emoji:after {
        content: "";
        width: 100%;
        height: 100%;
        transform: translateZ(0);
      }
      .switch__emoji:before {
        background-color: #f2c40d;
        box-shadow: -0.25em -0.25em 0.25em #c29d0a inset, 0.1875em 0.1875em 0.25em #f9e286 inset;
      }
      .switch__emoji:after {
        box-shadow: 0 0 0.125em 0.0625em rgba(245, 208, 61, 0.5) inset;
      }
      .switch__emoji,
      .switch__emoji-face {
        transform-style: preserve-3d;
        transition: transform var(--trans-dur) var(--trans-timing2);
      }
      .switch__emoji-eye,
      .switch__emoji-mouth {
        backface-visibility: hidden;
      }
      .switch__emoji-eye {
        border: 0.0625em solid hsl(var(--hue), 10%, 10%);
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        width: 0.25em;
        height: 0.25em;
        transform: translate(-50%, -50%) rotateY(-22.5deg) translateZ(0.5em) rotateZ(45deg);
      }
      .switch__emoji-eye + .switch__emoji-eye {
        transform: translate(-50%, -50%) rotateY(22.5deg) translateZ(0.5em) rotateZ(45deg);
      }
      .switch__emoji-mouth {
        background-image: radial-gradient(100% 100% at 50% 100%, #f2180d 20%, #f5463d 33%, rgba(245, 70, 61, 0) 35%),
          radial-gradient(100% 100% at 75% 113%, black 26%, rgba(0, 0, 0, 0) 35%),
          linear-gradient(rgba(0, 0, 0, 0) 50%, black 50% 55%, hsl(var(--hue), 10%, 10%) 65%);
        top: 50%;
        left: 50%;
        width: 0.5em;
        height: 0.5em;
        transform: translate(-50%, -50%) rotateX(-15deg) translateZ(0.5em);
      }
      .switch__emoji-face {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: rotateY(0);
      }
      .switch__emoji-face + .switch__emoji-face {
        transform: rotateY(-180deg);
      }
      .switch__emoji-face--sad .switch__emoji-eye {
        background-color: hsl(var(--hue), 10%, 10%);
        border: 0;
        width: 0.1875em;
        height: 0.1875em;
      }
      .switch__emoji-face--sad .switch__emoji-mouth {
        background-image: none;
        border: 0.0625em solid transparent;
        border-top-color: hsl(var(--hue), 10%, 10%);
        transform: translate(-50%, 0) rotateX(-20deg) translateZ(0.5em);
      }
      .switch__input,
      .switch__label {
        -webkit-tap-highlight-color: transparent;
      }
      .switch__input {
        background-color: hsl(var(--hue), 10%, 80%);
        border-radius: 0.75em;
        box-shadow: 0.0625em 0.0625em 0.0625em white inset, -0.0625em -0.0625em 0.0625em hsl(var(--hue), 10%, 80%) inset,
          0 0 0 0.125em hsl(var(--hue), 10%, 90%) inset, 0.25em 0.25em 0.125em rgba(0, 0, 0, 0.3) inset, 0.0625em 0.0625em 0.0625em rgba(0, 0, 0, 0.3);
        cursor: pointer;
        display: block;
        width: 2.5em;
        height: 1.5em;
        -webkit-appearance: none;
        appearance: none;
        transition: background-color var(--trans-dur) var(--trans-timing1), box-shadow var(--trans-dur) var(--trans-timing1);
      }
      .switch__input:checked {
        background-color: #0ac213;
      }
      .switch__input:checked + .switch__emoji {
        transform: translateX(100%);
      }
      [dir="rtl"] .switch__input:checked + .switch__emoji {
        transform: translateX(-100%);
      }
      .switch__input:checked + .switch__emoji .switch__emoji-face {
        transform: rotateY(179.99deg);
      }
      [dir="rtl"] .switch__input:checked + .switch__emoji .switch__emoji-face {
        transform: rotateY(-179.99deg);
      }
      .switch__input:checked + .switch__emoji .switch__emoji-face + .switch__emoji-face {
        transform: rotateY(0);
      }
      [dir="rtl"] .switch__input:checked + .switch__emoji .switch__emoji-face + .switch__emoji-face {
        transform: rotateY(-360deg);
      }
      .switch__label,
      .switch__wrapper {
        display: block;
      }
      .switch__label {
        margin-inline-start: 0.5em;
        overflow: hidden;
        position: absolute;
        width: 1px;
        height: 1px;
      }
      .switch__wrapper {
        position: relative;
      }

      /* Dark theme */
      @media (prefers-color-scheme: dark) {
        :root {
          --bg: hsl(var(--hue), 10%, 10%);
          --fg: hsl(var(--hue), 10%, 90%);
        }

        .switch__input {
          background-color: hsl(var(--hue), 10%, 20%);
          box-shadow: 0.0625em 0.0625em 0.0625em hsl(var(--hue), 10%, 25%) inset, -0.0625em -0.0625em 0.0625em hsl(var(--hue), 10%, 20%) inset,
            0 0 0 0.125em hsl(var(--hue), 10%, 30%) inset, 0.25em 0.25em 0.125em rgba(0, 0, 0, 0.3) inset,
            0.0625em 0.0625em 0.0625em rgba(0, 0, 0, 0.3);
        }
      }
    </style>
  </head>
  <body>
    <label class="switch">
      <span class="switch__wrapper">
        <input class="switch__input" type="checkbox" role="switch" />
        <span class="switch__emoji">
          <span class="switch__emoji-face switch__emoji-face--sad">
            <span class="switch__emoji-eye"></span>
            <span class="switch__emoji-eye"></span>
            <span class="switch__emoji-mouth"></span>
          </span>
          <span class="switch__emoji-face">
            <span class="switch__emoji-eye"></span>
            <span class="switch__emoji-eye"></span>
            <span class="switch__emoji-mouth"></span>
          </span>
        </span>
      </span>
      <span class="switch__label">Power</span>
    </label>
  </body>
</html>
